import { SwapRightOutlined } from '@ant-design/icons';
import { DatePicker } from 'antd';
import React, { useState, useEffect } from 'react';
import './index.less';
import moment from 'moment';
import { disabledDate } from '../../utils';

const SingleRangePicker: React.FC<ISingleRangePickerProps> = (props) => {
  const [endDate, setEndDate] = useState<any>();

  const onChange = (date: any) => {
    props.onChange && props.onChange(date);
  };

  useEffect(() => {
    if (props.value) {
      const lastDayOfMonth = moment(props.value).endOf('month');
      setEndDate(lastDayOfMonth);
    }
  }, [props.value]);

  return (
    <div className="single-range-picker">
      <DatePicker onChange={onChange} value={props.value} disabledDate={disabledDate} />
      <SwapRightOutlined />
      <DatePicker disabled value={endDate} />
    </div>
  );
};

interface ISingleRangePickerProps {
  value?: any;
  onChange?: (value: any) => void;
}

export default SingleRangePicker;
